<template>
  <div class="app-container">
     <!-- stripe 带斑马纹 -->
        <el-table
            :data="list"
            stripe
            border
            style="width: 100%">

           
            <el-table-column  align="center" type="index" label="序号" width="60"></el-table-column>
            <el-table-column  align="center" prop="name" label="分类名称" ></el-table-column>
            <el-table-column  align="center" prop="sort" label="排序" ></el-table-column>
            <el-table-column  align="center" prop="remark" label="备注" ></el-table-column>
            <el-table-column  align="center" prop="status" label="状态" >
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status | statusFilter">
                        {{ scope.row.status ? '正常': '禁用'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column  align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="success" @click="handleEdit(scope.row.id)" size="mini">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(scope.row.id)"  size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 分页组件 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.current"
            :page-sizes="[2,5,10, 20, 50]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
        </el-pagination>
  </div>
</template>

<script>
import api from '@/api/category'

export default {
  data () {
    return {

      list: [], // 列表数据

            page: { // 分页对象
                current: 1, // 当前页码
                size: 20, // 每页显示多少条
                total: 0 // 总记录数
            },


      query: {},
    }
  },

  components: {

  },

  created() {
    this.fetchData();
  },

  methods: {
     fetchData() {
            api.getList(this.query, this.page.current, this.page.size).then(response => {
                // console.log('response', response)
                // 列表数据
                this.list = response.data.records
                this.page.total = response.data.total
            })
        },

        handleEdit(id){
          alert(id);
        },

        handleDelete(id){
          alert(id)
        },

        handleSizeChange(val){
            this.page.current = 1;
            this.page.size = val;
            this.fetchData();
        },

        handleCurrentChange(val){
          this.page.current = val;
          this.fetchData();
        }
  }
}
</script>

<style scoped>
</style>